<template>
<div class="page page3" :style="index>=0&&'background: #fff;'">
  <div class="contant">
    <div class="head" :class="renderClass()" />
    <div @click="$emit('setPage',1)" class="btn" />
    <div class="main" />
    <!-- index -->
    <div class="index">
      <transition name="fade" @after-enter="showBtn = true">
        <div v-show="show&&index===-1" class="text" />
      </transition>
    </div>
    <!-- 1 -->
    <div class="a1">
      <transition name="fade" @after-enter="[0,2].forEach(v=>{$set(a1,v,true)})">
        <div v-show="show&&(index===0||index===1)" class="banner" />
      </transition>
      <transition name="fade" @after-enter="$set(a1,1,true)">
        <div v-show="a1[0]&&index===0" class="t1" />
      </transition>
      <transition name="fade-long" @after-enter="showBtn = true">
        <div v-show="a1[1]&&index===0" class="t2" />
      </transition>
      <transition name="fade" @after-enter="$set(a1,3,true)">
        <div v-show="a1[2]&&index===1" class="t3" />
      </transition>
      <transition name="fade-long" @after-enter="showBtn = true">
        <div v-show="a1[3]&&index===1" class="t4" />
      </transition>
    </div>
    <!-- 2 -->
    <div class="a2">
      <transition name="fade" @after-enter="[0,1,2].forEach(v=>{$set(a2,v,true)})">
        <div v-show="show&&index===2" class="banner" />
      </transition>
      <transition name="fade">
        <div v-show="a2[0]&&index===2" class="t1" />
      </transition>
      <transition name="fade">
        <div v-show="a2[1]&&index===2" class="t2" :style="a2[1]&&index===2&&'transition-delay: 0.5s'" />
      </transition>
      <transition name="fade" @after-enter="$set(a2,3,true)">
        <div v-show="a2[2]&&index===2" class="t3" :style="a2[2]&&index===2&&'transition-delay: 1s'" />
      </transition>
      <transition name="fade" @after-enter="$set(a2,4,true)">
        <div v-show="a2[3]&&index===2" class="t4" />
      </transition>
      <transition name="fade" @after-enter="$set(a2,5,true)">
        <div v-show="a2[4]&&index===2" class="t5" />
      </transition>
      <transition name="fade" @after-enter="$set(a2,6,true)">
        <div v-show="a2[5]&&index===2" class="t6" />
      </transition>
      <transition name="fade" @after-enter="$set(a2,7,true)">
        <div v-show="a2[6]&&index===2" class="t7" />
      </transition>
      <transition name="fade" @after-enter="$set(a2,8,true)">
        <div v-show="a2[7]&&index===2" class="t8" />
      </transition>
      <transition name="fade" @after-enter="showBtn = true">
        <div v-show="a2[8]&&index===2" class="t9" />
      </transition>
    </div>
    <!-- 3 -->
    <div class="a3">
      <div v-show="show&&index===3">
        <transition name="fade" :duration="1000" @after-enter="showBtn = true">
          <div v-show="show&&index===3" class="banner" />
        </transition>
      </div>
    </div>
    <div class="a3">
      <transition name="fade" @after-enter="$set(a3,0,true)">
        <div v-show="index===4" class="t1" />
      </transition>
      <transition name="fade" @after-enter="$set(a3,1,true)">
        <div v-show="a3[0]&&index===4" class="t2" />
      </transition>
      <transition name="fade" @after-enter="$set(a3,2,true)">
        <div v-show="a3[1]&&index===4" class="t3" />
      </transition>
      <transition name="fade" @after-enter="$set(a3,3,true)">
        <div v-show="a3[2]&&index===4" class="t4" />
      </transition>
      <transition name="fade" @after-enter="showBtn = true">
        <div v-show="a3[3]&&index===4" class="t5" />
      </transition>
    </div>
    <!-- 4 -->
    <div class="a4">
      <transition name="fade" @after-enter="$set(a4,0,true)">
        <div v-show="show&&index===5" class="banner" />
      </transition>
      <transition name="fade-long" @after-enter="showBtn = true">
        <div v-show="a4[0]&&index===5" class="t1" />
      </transition>
    </div>
    <!-- 5 -->
    <div class="a5" v-show="show&&index===6">
      <!-- <div v-show="!a5[2]"> -->
      <transition name="fade-long" @after-enter="$set(a5,1,true)">
        <div v-show="show&&index===6&&!a5[2]" class="banner" />
      </transition>
      <!-- </div> -->
      <transition name="fade-inout" @after-leave="index===6&&$set(a5,2,true);" @after-enter="showBtn = true">
        <div v-show="a5[0]&&index===6" class="t1" />
      </transition>
      <transition name="ballscale">
        <div v-show="a5[1]&&index===6" class="t2 ball" />
      </transition>
      <transition name="ballscale">
        <div v-show="a5[1]&&index===6" class="t3 ball" :style="a5[1]&&index===6&&'transition-delay: 0.2s'" />
      </transition>
      <transition name="ballscale" @after-enter="$set(a5,0,true);">
        <div v-show="a5[1]&&index===6" class="t4 ball" :style="a5[1]&&index===6&&'transition-delay: 0.4s'" />
      </transition>
    </div>
    <div class="a5">
      <transition name="fade" @after-enter="$set(a5,3,true)">
        <div v-show="index===7" class="t5">
          <transition name="fade" @after-enter="$set(a5,4,true)">
            <div v-show="a5[3]&&index===7" class="t6" />
          </transition>
        </div>
      </transition>
      <transition name="fade" @after-enter="$set(a5,5,true)">
        <div v-show="a5[4]&&index===7" class="t7">
          <transition name="fade" @after-enter="$set(a5,6,true)">
            <div v-show="a5[5]&&index===7" class="t8" />
          </transition>
        </div>
      </transition>
      <transition name="fade" @after-enter="$set(a5,7,true)">
        <div v-show="a5[6]&&index===7" class="t9">
          <transition name="fade" @after-enter="showBtn = true">
            <div v-show="a5[7]&&index===7" class="t10" />
          </transition>
        </div>
      </transition>
    </div>
    <!-- 6 -->
    <div class="a6">
      <transition name="fade" @after-enter="$set(a6,0,true)">
        <div v-show="show&&index===8" class="banner" />
      </transition>
      <transition name="fade" @after-enter="$set(a6,1,true)">
        <div v-show="a6[0]&&index===8" class="t1" />
      </transition>
      <transition name="fade" @after-enter="$set(a6,2,true)">
        <div v-show="a6[1]&&index===8" class="t2" />
      </transition>
      <transition name="fade" @after-enter="$set(a6,3,true)">
        <div v-show="a6[2]&&index===8" class="t3" />
      </transition>
      <transition name="fade-long" @after-enter="showBtn = true">
        <div v-show="a6[3]&&index===8" class="t4" />
      </transition>
    </div>
    <div class="bottom" />
    <div class="flower" @click="next" v-show="index===-1&&showBtn" />
    <div class="flower" @click="next" v-show="index>=0&&index<=8&&showBtn" />
    <div class="flowerP" @click="prev" v-show="index>=0&&showBtn" />
  </div>
</div>
</template>

<script>
const RATE = window.screen.height / window.screen.width
export default {
  name: 'page3',
  props: {
    show: {
      type: Boolean,
      default () {
        return false
      }
    },
  },
  watch: {
    show() {
      if (this.show) {
        this.index = -1
        this.showBtn = false
      }
    }
  },
  data() {
    return {
      a1: [false, false, false, false],
      a2: [false, false, false, false, false, false, false, false, false],
      a3: [false, false, false, false],
      a4: [false],
      a5: [false, false, false, false, false, false, false, false],
      a6: [false, false, false, false, false],
      index: -1,
      showBtn: false
    }
  },
  created() {},
  methods: {
    next() {
      if (this.index >= 8) {
        this.$emit('setPage', 3)
      } else {
        this.index++
          this.closs()
      }
    },
    prev() {
      this.index--
        this.closs()
    },
    closs() {
      let arr = ['a1', 'a2', 'a3', 'a4', 'a5', 'a5', 'a6']
      let i = this.index === 0 ? 1 : this.index
      arr.forEach(v => {
        if (v !== `a${i}`) {
          this[v].forEach((res, i) => {
            this.$set(this[v], i, false)
          })
        }
      })
      this.showBtn = false
    },
    renderClass() {
      if ([0, 1].includes(this.index)) {
        return 'h1'
      } else if ([2, 3, 4, 5].includes(this.index)) {
        return 'h2'
      } else if ([6, 7, 8].includes(this.index)) {
        return 'h3'
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus">
@keyframes shin
  0%
    opacity: 0;
  50%
    opacity: 1;
.page3
  background: url('~assets/b1.jpg') no-repeat;
  background-size: 100% 100%;
  .contant
    width: 100vw;
    height: calc(100vw*(950/640));
    position: absolute;
    top: 50%;
    margin-top: calc(-50vw*(950/640));
    overflow: hidden;
    .head
      position: absolute;
      top: 0;
      left: calc(100vw*(16/640));
    .h1
      width: calc(100vw*(147/640));
      height: calc(100vw*(34/640));
      background: url('~assets/h4.png') no-repeat;
      background-size: 100% 100%;
    .h2
      width: calc(100vw*(370/640));
      height: calc(100vw*(35/640));
      background: url('~assets/h5.png') no-repeat;
      background-size: 100% 100%;
    .h3
      width: calc(100vw*(150/640));
      height: calc(100vw*(35/640));
      background: url('~assets/h8.png') no-repeat;
      background-size: 100% 100%;
    .main
      width: calc(100vw*(608/640));
      height: calc(100vw*(829/640));
      position: absolute;
      left: 50%;
      top: calc(100vw*(53/640));
      margin-left: calc(-50vw*(608/640));
      background: url('~assets/m3.png') no-repeat;
      background-size: 100% 100%;
    .fade-enter-active
      transition: all 0.5s cubic-bezier(1, 0.5, 0.3, 0.1);
      opacity: 1;
    .fade-enter
      opacity: 0;
    .fade-long-enter-active
      transition: all 1s cubic-bezier(1, 0.5, 0.3, 0.1);
      opacity: 1;
    .fade-long-enter
      opacity: 0;
    .fade-inout-enter-active,.fade-inout-leave-active
      transition: all 1.5s cubic-bezier(1, 0.5, 0.3, 0.1);
      opacity: 1;
    .fade-inout-enter,.fade-inout-leave-to
      opacity: 0;
    @keyframes fade
      0%
        opacity: 0;
      40%
        opacity: 1;
      60%
        opacity: 1;
      100%
        opacity: 0;
    .index
      .slide-enter-active
        transition: all 2s;
      .slide-enter
        transform: translateX(calc(-100vw*(572/640)));
        opacity: 0;
      .text
        width: calc(100vw*(501/640));
        height: calc(100vw*(213/640));
        position: absolute;
        top: calc(100vw*(360/640));
        left: calc(100vw*(71/640));
        background: url('~assets/t3.png') no-repeat;
        background-size: 100% 100%;
    .a1
      .banner
        width: calc(100vw*(581/640));
        height: calc(100vw*(327/640));
        position: absolute;
        top: calc(100vw*(65/640));
        left: calc(100vw*(30/640));
        background: url('~assets/bn4.png') no-repeat;
        background-size: 100% 100%;
      .t1
        width: calc(100vw*(138/640));
        height: calc(100vw*(124/640));
        position: absolute;
        top: calc(100vw*(471/640));
        left: calc(100vw*(251/640));
        background: url('~assets/t4_1.png') no-repeat;
        background-size: 100% 100%;
      .t2
        width: calc(100vw*(170/640));
        height: calc(100vw*(134/640));
        position: absolute;
        top: calc(100vw*(642/640));
        left: calc(100vw*(235/640));
        background: url('~assets/t4_2.png') no-repeat;
        background-size: 100% 100%;
      .t3
        width: calc(100vw*(316/640));
        height: calc(100vw*(117/640));
        position: absolute;
        top: calc(100vw*(434/640));
        left: calc(100vw*(162/640));
        background: url('~assets/t4_3.png') no-repeat;
        background-size: 100% 100%;
      .t4
        width: calc(100vw*(254/640));
        height: calc(100vw*(236/640));
        position: absolute;
        top: calc(100vw*(583/640));
        left: calc(100vw*(193/640));
        background: url('~assets/t4_4.png') no-repeat;
        background-size: 100% 100%;
    .a2
      .scale-enter-active
        transition: all 0.5s cubic-bezier(0.1,0.3,0.5,1);
        transform: scale(1);
        opacity: 1;
      .scale-enter
        transform: scale(0.1);
        opacity: 0;
      .fall-enter-active
        transition: all 1s cubic-bezier(0.1,0.3,0.5,1);
        transform: translateY(0)
      .fall-enter
        transform: translateY(-50%)
      .banner
        width: calc(100vw*(414/640));
        height: calc(100vw*(328/640));
        position: absolute;
        top: calc(100vw*(79/640));
        left: calc(100vw*(114/640));
        background: url('~assets/t5_1.png') no-repeat;
        background-size: 100% 100%;
        z-index: 5;
      .t1
        width: calc(100vw*(142/640));
        height: calc(100vw*(143/640));
        position: absolute;
        top: calc(100vw*(79/640));
        right: calc(100vw*(176/640));
        background: url('~assets/t5_2.png') no-repeat;
        background-size: 100% 100%;
        z-index: 6;
      .t2
        width: calc(100vw*(146/640));
        height: calc(100vw*(146/640));
        position: absolute;
        top: calc(100vw*(114/640));
        left: calc(100vw*(175/640));
        background: url('~assets/t5_3.png') no-repeat;
        background-size: 100% 100%;
      .t3
        width: calc(100vw*(148/640));
        height: calc(100vw*(147/640));
        position: absolute;
        top: calc(100vw*(245/640));
        left: calc(100vw*(246/640));
        background: url('~assets/t5_4.png') no-repeat;
        background-size: 100% 100%;
      .t4
        width: calc(100vw*(85/640));
        height: calc(100vw*(64/640));
        position: absolute;
        top: calc(100vw*(410/640));
        left: calc(100vw*(278/640));
        background: url('~assets/t5_5.png') no-repeat;
        background-size: 100% 100%;
      .t5
        width: calc(100vw*(198/640));
        height: calc(100vw*(58/640));
        position: absolute;
        top: calc(100vw*(487/640));
        left: calc(100vw*(222/640));
        background: url('~assets/t5_6.png') no-repeat;
        background-size: 100% 100%;
      .t6
        width: calc(100vw*(49/640));
        height: calc(100vw*(49/640));
        position: absolute;
        top: calc(100vw*(558/640));
        left: 50vw;
        margin-left: calc(-50vw*(49/640));
        background: url('~assets/t5_7.png') no-repeat;
        background-size: 100% 100%;
      .t7
        width: calc(100vw*(437/640));
        height: calc(100vw*(133/640));
        position: absolute;
        top: calc(100vw*(607/640));
        left: calc(100vw*(101/640));
        background: url('~assets/t5_8.png') no-repeat;
        background-size: 100% 100%;
      .t8
        width: calc(100vw*(83/640));
        height: calc(100vw*(70/640));
        position: absolute;
        top: calc(100vw*(744/640));
        left: 50vw;
        margin-left: calc(-50vw*(83/640));
        background: url('~assets/t5_9.png') no-repeat;
        background-size: 100% 100%;
      .t9
        width: calc(100vw*(175/640));
        height: calc(100vw*(27/640));
        position: absolute;
        top: calc(100vw*(822/640));
        left: 50vw;
        margin-left: calc(-50vw*(175/640));
        background: url('~assets/t5_10.png') no-repeat;
        background-size: 100% 100%;
    .a3
      .banner
        width: calc(100vw*(395/640));
        height: calc(100vw*(106/640));
        position: absolute;
        top: calc(100vw*(385/640));
        left: calc(100vw*(123/640));
        background: url('~assets/bn6.png') no-repeat;
        background-size: 100% 100%;
        z-index: 5;
      .t1
        width: calc(100vw*(209/640));
        height: calc(100vw*(35/640));
        position: absolute;
        top: calc(100vw*(340/640));
        left: calc(100vw*(106/640));
        background: url('~assets/t6_1.png') no-repeat;
        background-size: 100% 100%;
      .t2
        width: calc(100vw*(124/640));
        height: calc(100vw*(22/640));
        position: absolute;
        top: calc(100vw*(290/640));
        left: calc(100vw*(156/640));
        background: url('~assets/t6_2.png') no-repeat;
        background-size: 100% 100%;
      .t3
        width: calc(100vw*(208/640));
        height: calc(100vw*(35/640));
        position: absolute;
        top: calc(100vw*(340/640));
        right: calc(100vw*(105/640));
        background: url('~assets/t6_3.png') no-repeat;
        background-size: 100% 100%;
      .t4
        width: calc(100vw*(72/640));
        height: calc(100vw*(22/640));
        position: absolute;
        top: calc(100vw*(290/640));
        right: calc(100vw*(152/640));
        background: url('~assets/t6_4.png') no-repeat;
        background-size: 100% 100%;
      .t5
        width: calc(100vw*(73/640));
        height: calc(100vw*(80/640));
        position: absolute;
        top: calc(100vw*(416/640));
        left: calc(100vw*(284/640));
        background: url('~assets/t6_5.png') no-repeat;
        background-size: 100% 100%;
    .a4
      .banner
        width: calc(100vw*(344/640));
        height: calc(100vw*(126/640));
        position: absolute;
        top: calc(100vw*(156/640));
        right: calc(100vw*(147/640));
        background: url('~assets/t7_1.png') no-repeat;
        background-size: 100% 100%;
      .t1
        width: calc(100vw*(373/640));
        height: calc(100vw*(327/640));
        position: absolute;
        top: calc(100vw*(352/640));
        left: calc(100vw*(131/640));
        background: url('~assets/t7_2.png') no-repeat;
        background-size: 100% 100%;
    .a5
      .ballscale-enter-active,.ballscale-leave-active
        transition: all 0.6s;
        opacity: 1;
        transform: scale(1);
      .ballscale-enter
        transform: scale(0.3);
        opacity: 0;
      .ballscale-leave-to
        transform: scale(1);
        opacity: 0;
      .banner
        width: calc(100vw*(306/640));
        height: calc(100vw*(28/640));
        position: absolute;
        top: calc(100vw*(150/640));
        left:50%;
        margin-left: calc(-50vw*(306/640));
        background: url('~assets/t8_1.png') no-repeat;
        background-size: 100% 100%;
      .t1
        width: calc(100vw*(139/640));
        height: calc(100vw*(114/640));
        position: absolute;
        top: calc(100vw*(378/640));
        left: calc(100vw*(257/640));
        background: url('~assets/t8_2.png') no-repeat;
        background-size: 100% 100%;
        z-index: 5;
      .ball
        width: calc(100vw*(345/640));
        height: calc(100vw*(345/640));
        background: url('~assets/t8_3.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
      .t2
        top: calc(100vw*(243/640));
        left: calc(100vw*(148/640));
      .t3
        top: calc(100vw*(262/640));
        right: calc(100vw*(119/640));
      .t4
        top: calc(100vw*(278/640));
        left: calc(100vw*(148/640));
      .t5
        width: calc(100vw*(455/640));
        height: calc(100vw*(302/640));
        position: absolute;
        top: calc(100vw*(129/640));
        left: calc(100vw*(92/640));
        background: url('~assets/t8_4.png') no-repeat;
        background-size: 100% 100%;
      .t6
        width: calc(100vw*(455/640));
        height: calc(100vw*(49/640));
        position: absolute;
        bottom: 0;
        left: 0;
        background:#fff url('~assets/t8_5.png') no-repeat;
        background-size: 100% 100%;
      .t7
        width: calc(100vw*(223/640));
        height: calc(100vw*(334/640));
        position: absolute;
        top: calc(100vw*(456/640));
        left: calc(100vw*(92/640));
        background: url('~assets/t8_6.png') no-repeat;
        background-size: 100% 100%;
      .t8
        width: calc(100vw*(223/640));
        height: calc(100vw*(49/640));
        position: absolute;
        bottom: 0;
        left: 0;
        background:#fff url('~assets/t8_7.png') no-repeat;
        background-size: 100% 100%;
      .t9
        width: calc(100vw*(221/640));
        height: calc(100vw*(334/640));
        position: absolute;
        top: calc(100vw*(456/640));
        right: calc(100vw*(92/640));
        background: url('~assets/t8_8.png') no-repeat;
        background-size: 100% 100%;
      .t10
        width: calc(100vw*(221/640));
        height: calc(100vw*(49/640));
        position: absolute;
        bottom: 0;
        left: 0;
        background:#fff url('~assets/t8_9.png') no-repeat;
        background-size: 100% 100%;
    .a6
      .banner
        width: calc(100vw*(576/640));
        height: calc(100vw*(225/640));
        position: absolute;
        top: calc(100vw*(70/640));
        left: calc(100vw*(33/640));
        background: url('~assets/t9_1.png') no-repeat;
        background-size: 100% 100%;
      .t1
        width: calc(100vw*(577/640));
        height: calc(100vw*(198/640));
        position: absolute;
        top: calc(100vw*(302/640));
        left: calc(100vw*(33/640));
        background: url('~assets/t9_2.png') no-repeat;
        background-size: 100% 100%;
      .t2
        width: calc(100vw*(281/640));
        height: calc(100vw*(156/640));
        position: absolute;
        top: calc(100vw*(508/640));
        left: calc(100vw*(33/640));
        background: url('~assets/t9_3.png') no-repeat;
        background-size: 100% 100%;
      .t3
        width: calc(100vw*(282/640));
        height: calc(100vw*(156/640));
        position: absolute;
        top: calc(100vw*(508/640));
        right: calc(100vw*(33/640));
        background: url('~assets/t9_4.png') no-repeat;
        background-size: 100% 100%;
      .t4
        width: calc(100vw*(420/640));
        height: calc(100vw*(141/640));
        position: absolute;
        top: calc(100vw*(684/640));
        right: calc(100vw*(112/640));
        background: url('~assets/t9_5.png') no-repeat;
        background-size: 100% 100%;
    .bottom
      width: calc(100vw*(608/640));
      height: calc(100vw*(56/640));
      position: absolute;
      left: 50%;
      top: calc(100vw*(886/640));
      margin-left: calc(-50vw*(608/640));
      background: url('~assets/b3.png') no-repeat;
      background-size: 100% 100%;
    .flower,.flowerP
      width: calc(100vw*(33/640));
      height: calc(100vw*(33/640));
      position: absolute;
      top: calc(100vw*(826/640));
      opacity: 0;
      animation:shin linear 2s infinite both;
      border: 30px solid transparent;
      color:transparent;
      margin-top: -30px;
    .flower
      background: url('~assets/f3.png') no-repeat;
      background-size: 100% 100%;
      right: calc(100vw*(97/640));
      margin-right: -30px;
    .flowerP
      background: url('~assets/f4.png') no-repeat;
      background-size: 100% 100%;
      left: calc(100vw*(97/640));
      margin-left: -30px;
@media only screen and (device-aspect-ratio:3/4),
only screen and (device-aspect-ratio:512/683)
  .page3
    height: 100%;
    .contant
      height: 100%;
      top: -50%;
      transform: translateY(50%);
      margin-top: 0;
      .head
        top: calc(100%*(9/800));
      .main
        height: calc(100%*(664/800));
        top: calc(100%*(63/800));
        background: url('~assets/ipad/m3.png') no-repeat;
        background-size: 100% 100%;
      .index
        .text
          width: calc(100vw*(495/640));
          height: calc(100%*(213/800));
          top: calc(100%*(277/800));
          left: calc(100vw*(73/640));
      .a1
        .banner
          width: calc(100vw*(552/640));
          height: calc(100%*(313/800));
          top: calc(100%*(86/800));
          left: 50%;
          margin-left: calc(-50vw*(552/640));
        .t1
          width: calc(100vw*(126/640));
          height: calc(100%*(105/800));
          top: calc(100%*(427/800));
          left: 50%;
          margin-left: calc(-50vw*(126/640));
          background: url('~assets/ipad/t4_1.png') no-repeat;
          background-size: 100% 100%;
        .t2
          width: calc(100vw*(167/640));
          height: calc(100%*(111/800));
          top: calc(100%*(569/800));
          left: 50%;
          margin-left: calc(-50vw*(167/640));
          background: url('~assets/ipad/t4_2.png') no-repeat;
          background-size: 100% 100%;
        .t3
          width: calc(100vw*(230/640));
          height: calc(100%*(87/800));
          top: calc(100%*(427/800));
          left: calc(100vw*(206/640));
          background: url('~assets/ipad/t4_3.png') no-repeat;
          background-size: 100% 100%;
        .t4
          width: calc(100vw*(230/640));
          height: calc(100%*(175/800));
          top: calc(100%*(531/800));
          left: calc(100vw*(207/640));
          background: url('~assets/ipad/t4_4.png') no-repeat;
          background-size: 100% 100%;
      .a2
        .banner
          width: calc(100vw*(337/640));
          height: calc(100%*(268/800));
          top: calc(100%*(90/800));
          left: calc(100vw*(152/640));
          z-index: 5;
        .t1
          width: calc(100vw*(116/640));
          height: calc(100vw*(116/640));
          top: calc(100%*(90/800));
          right: calc(100vw*(202/640));
          z-index: 6;
        .t2
          width: calc(100vw*(118/640));
          height: calc(100vw*(118/640));
          top: calc(100%*(109/800));
          left: calc(100vw*(204/640));
        .t3
          width: calc(100vw*(119/640));
          height: calc(100vw*(119/640));
          top: calc(100%*(212/800));
          left: calc(100vw*(265/640));
        .t4
          width: calc(100vw*(65/640));
          height: calc(100%*(52/800));
          top: calc(100%*(358/800));
          left: calc(100vw*(288/640));
        .t5
          width: calc(100vw*(160/640));
          height: calc(100%*(46/800));
          top: calc(100%*(414/800));
          left: calc(100vw*(242/640));
          background: url('~assets/ipad/t5_6.png') no-repeat;
          background-size: 100% 100%;
        .t6
          width: calc(100vw*(38/640));
          height: calc(100vw*(38/640));
          top: calc(100%*(472/800));
          left: 50vw;
          margin-left: calc(-50vw*(38/640));
        .t7
          width: calc(100vw*(356/640));
          height: calc(100%*(99/800));
          top: calc(100%*(515/800));
          left: calc(100vw*(142/640));
          background: url('~assets/ipad/t5_8.png') no-repeat;
          background-size: 100% 100%;
        .t8
          width: calc(100vw*(65/640));
          height: calc(100%*(50/800));
          top: calc(100%*(624/800));
          left: 50vw;
          margin-left: calc(-50vw*(64/640));
          background: url('~assets/ipad/t5_9.png') no-repeat;
        .t9
          width: calc(100vw*(140/640));
          height: calc(100%*(21/800));
          position: absolute;
          top: calc(100%*(688/800));
          left: 50vw;
          margin-left: calc(-50vw*(140/640));
          background: url('~assets/ipad/t5_10.png') no-repeat;
          background-size: 100% 100%;
      .a3
        .banner
          width: calc(100vw*(334/640));
          height: calc(100%*(82/800));
          top: calc(100%*(359/800));
          left: calc(100vw*(152/640));
          background: url('~assets/ipad/bn6.png') no-repeat;
          background-size: 100% 100%;
          z-index: 5;
      .a4
        .banner
          width: calc(100vw*(292/640));
          height: calc(100%*(107/800));
          top: calc(100%*(176/800));
          left: calc(100vw*(174/640));
          background: url('~assets/ipad/t7_1.png') no-repeat;
          background-size: 100% 100%;
        .t1
          width: calc(100vw*(292/640));
          height: calc(100%*(261/800));
          top: calc(100%*(335/800));
          left: calc(100vw*(174/640));
          background: url('~assets/ipad/t7_2.png') no-repeat;
          background-size: 100% 100%;
      .a5
        .banner
          width: calc(100vw*(287/640));
          height: calc(100%*(26/800));
          left: 50%;
          margin-left: calc(-50vw*(287/640));
          background: url('~assets/ipad/t8_1.png') no-repeat;
          background-size: 100% 100%;
        .t5
          width: calc(100vw*(403/640));
          height: calc(100%*(269/800));
          top: calc(100%*(86/800));
          left: calc(100vw*(120/640));
        .t6
          width: calc(100vw*(403/640));
          height: calc(100%*(35/269));
          background:#fff url('~assets/ipad/t8_5.png') no-repeat;
          background-size: 100% 100%;
        .t7
          width: calc(100vw*(196/640));
          height: calc(100%*(297/800));
          top: calc(100%*(364/800));
          left: calc(100vw*(120/640));
        .t8
          width: calc(100vw*(196/640));
          height: calc(100%*(35/297));
          background:#fff url('~assets/ipad/t8_7.png') no-repeat;
          background-size: 100% 100%;
        .t9
          width: calc(100vw*(196/640));
          height: calc(100%*(297/800));
          top: calc(100%*(364/800));
          right: calc(100vw*(120/640));
        .t10
          width: calc(100vw*(196/640));
          height: calc(100%*(35/297));
          background:#fff url('~assets/ipad/t8_9.png') no-repeat;
          background-size: 100% 100%;
      .a6
        .banner
          width: calc(100vw*(466/640));
          height: calc(100%*(182/800));
          top: calc(100%*(82/800));
          left: calc(100vw*(88/640));
        .t1
          width: calc(100vw*(466/640));
          height: calc(100%*(128/800));
          top: calc(100%*(271/800));
          left: calc(100vw*(88/640));
        .t2
          width: calc(100vw*(228/640));
          height: calc(100%*(126/800));
          top: calc(100%*(407/800));
          left: calc(100vw*(88/640));
        .t3
          width: calc(100vw*(228/640));
          height: calc(100%*(126/800));
          position: absolute;
          top: calc(100%*(407/800));
          right: calc(100vw*(88/640));
        .t4
          width: calc(100vw*(426/640));
          height: calc(100%*(145/800));
          top: calc(100%*(552/800));
          right: calc(100vw*(107/640));
          background: url('~assets/ipad/t9_5.png') no-repeat;
          background-size: 100% 100%;
      .bottom
        height: calc(100%*(56/800));
        top:calc(100%*(735/800));
        background: url('~assets/ipad/b3.png') no-repeat;
        background-size: 100% 100%;
      .flower,.flowerP
        top: calc(100%*(673/800));
      .flower
        right: calc(100vw*(108/640));
      .flowerP
        left: calc(100vw*(108/640));
</style>
